<template>
  <div class="username_wrapper">
    <user-name-header :headTitle="headTitle"></user-name-header>
    <div class="username">
      <div class="item_input">
        <input type="text" placeholder="用户名" v-model="inputValue" @input="inputThing">
      </div>
      <div class="item">
        <p class="hint">用户名只能修改一次（5-24个字）</p>
        <button type="button" class="modify" :class="{green: userNameIsValid}" @click="resetName">确认修改</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import UserNameHeader from '@/components/header/Header'
export default {
  name: 'UserName',
  data () {
    return {
      headTitle: '修改用户名',
      userNameIsValid: false, // 用户名是否合法
      inputValue: '' // 输入框的内容
    }
  },
  components: {
    UserNameHeader
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['RETSET_NAME']),
    inputThing () {
      if (this.inputValue.length < 5 || this.inputValue.length > 24) {
        this.userNameIsValid = false
        return false
      } else {
        this.userNameIsValid = true
        return true
      }
    },
    resetName () {
      let checkResult = this.inputThing()
      if (!checkResult) {
        return  // eslint-disable-line
      }
      this.RETSET_NAME(this.inputValue)
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .username_wrapper
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background-color: #f2f2f2
    z-index: 101
    padding-top .88rem
    .username
      padding-top: .3rem
      .item_input
        background-color: #fff
        border-top: .01rem solid #f5f5f5
        border-bottom: .01rem solid #f5f5f5
        input
          font-size: .32rem
          width: 100%
          height: .88rem
          padding: 0 .3rem
      .item
        padding: 0 .3rem
        .hint
          margin: .2rem 0
          color: #a9a9a9
          font-size: .24rem
        button
          display: block
          outline: none
          color: #fff
          width: 100%
          height: .96rem
          font-size: .32rem
          font-weight: 700
          border-radius: .1rem
          background-color: #c7c7c7
          &.green
            background-color: #00d762
</style>
